<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/cookie.js"></script>
    <style>
        .container {
            width: 1226px;
            margin: 20px auto;
        }

        .showGrade {
            margin-top: 10px;
            min-height: 250px;
        }

        .showGrade table {
            width: 100%;
            border: 0.5px solid #333;
            text-align: center;
            line-height: 40px;
            border-spacing: 0;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .showGrade table th,
        .showGrade table td {
            border: 0.5px solid #333;
        }

        /* shadow */
        .shadow {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 999;
            display: none;
        }

        /* .shadow {
            display: flex;
            justify-content: center;
            align-items: center;
        } */

        .editGrade {
            padding: 10px;
            background-color: #f9f9f9;
            /* border-radius: 4px; */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .editGrade .input-group {
            margin-bottom: 5px;
        }

        .searchOrderLimit {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 30px;
            font-size: 14px;
            margin-top: 10px;
        }

        .searchOrderLimit input[type="radio"] {
            vertical-align: middle;
        }

        .searchOrderLimit>* {
            height: 30px;
            margin-right: 20px;
        }

        .searchBar {
            display: flex;
        }

        .searchBar .searchCon {
            height: 30px;
            width: 250px;
            box-sizing: border-box;
            outline: none;
            border: 1px solid #999;
            border-right: 0;
        }

        .searchBar .searchBtn {
            display: block;
            width: 30px;
            height: 30px;
            background-color: #999;
        }

        .orderColBox,
        .orderTypeBox {
            height: 30px;
            padding: 0 10px;
            border: 1px dashed #999;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .orderColBox label,
        .orderTypeBox label {
            margin-right: 5px;
        }

        .pageBox {
            font-size: 12px;
            text-align: center;
            margin-top: 10px;
        }

        .pageBox span {
            padding: 0 5px;
        }


        .header {
            width: 1226px;
            margin: 0 auto;
            background-color: #e3e4e5;
            height: 45px;
            line-height: 45px;
            font-size: 12px;
        }

        .nav li {
            float: left;
            padding: 0 10px;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="header">
        <ul class="nav fl clear">
            <li>中国大陆</li>
            <li class="sign-login">
                <a href="./login.html">你好,请登录</a>
                <a href="./register.html">免费注册</a>
            </li>
            <li class="sign-user hide">
                <a class="wel" href="javascript:;">欢迎xxx</a>
                <a class="exit" href="javascript:;">退出</a>
            </li>
            <li>我的订单</li>
        </ul>
    </div>
    <div class="container">
        <div class="addGrade">
            <a href="./addGrade.html"><button>新增成绩</button></a>
        </div>
        <form class="searchOrderLimit" onsubmit="return false">
            <div class="searchBar">
                <input type="text" class="searchCon">
                <a class="searchBtn" href="javascript:;"></a>
            </div>
            <div class="orderColBox">
                <label><input type="radio" name="orderCol" class="orderCol" value="id" checked>默认</label>
                <label><input type="radio" name="orderCol" class="orderCol" value="chinese">语文</label>
                <label><input type="radio" name="orderCol" class="orderCol" value="math">数学</label>
                <label><input type="radio" name="orderCol" class="orderCol" value="english">英语</label>
                <label><input type="radio" name="orderCol" class="orderCol" value="total">总分</label>
            </div>
            <div class="orderTypeBox">
                <label><input type="radio" name="orderType" class="orderType" value="asc" checked>升序</label>
                <label><input type="radio" name="orderType" class="orderType" value="desc">降序</label>
            </div>
            <select class="showSel">
                <option value="5">每页显示5条</option>
                <option value="10">每页显示10条</option>
                <option value="15">每页显示15条</option>
                <option value="20">每页显示20条</option>
            </select>
            <input class="resetGrade" type="reset" value="重置">
        </form>
        <div class="showGrade">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2207</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a class="edit" href="javascript:;">编辑</a>
                        </td>
                        <td>
                            <a class="del" href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2207</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a class="edit" href="javascript:;">编辑</a>
                        </td>
                        <td>
                            <a class="del" href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2207</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a class="edit" href="javascript:;">编辑</a>
                        </td>
                        <td>
                            <a class="del" href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2207</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a class="edit" href="javascript:;">编辑</a>
                        </td>
                        <td>
                            <a class="del" href="javascript:;">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2207</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td>
                            <a class="edit" href="javascript:;">编辑</a>
                        </td>
                        <td>
                            <a class="del" href="javascript:;">删除</a>
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="pageBox">
            <button class="prev">上一页</button>
            <span class="cur">1/47</span>
            <span class="tips">共458条</span>
            <button class="next">下一页</button>
        </div>

    </div>
    <div class="shadow">
        <form class="editGrade" onsubmit="return false">
            <div class="input-group">
                <label>编号:</label>
                <input type="text" name="id" disabled>
            </div>
            <div class="input-group">
                <label>姓名:</label>
                <input type="text" name="name" disabled>
            </div>
            <div class="input-group">
                <label>班级:</label>
                <input type="text" name="class" disabled>
            </div>
            <div class="input-group">
                <label>语文:</label>
                <input type="text" name="ch">
            </div>
            <div class="input-group">
                <label>数学:</label>
                <input type="text" name="mh">
            </div>
            <div class="input-group">
                <label>英语:</label>
                <input type="text" name="eh">
            </div>
            <div class="input-group">
                <input class="save" type="submit" value="保存">
                <input class="reset" type="reset" value="取消">
            </div>
        </form>
    </div>
</body>
<script>
    var showGrade = document.querySelector(".showGrade");
    var shadow = document.querySelector(".shadow");
    var tbody = document.querySelector(".showGrade tbody");
    var form = document.querySelector(".shadow .editGrade");
    var save = document.querySelector(".save");
    var reset = document.querySelector(".reset");
    var searchOrderLimit = document.querySelector(".searchOrderLimit");
    var resetGrade = document.querySelector(".resetGrade");
    var showSel = document.querySelector(".showSel");

    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");
    var cur = document.querySelector(".cur");
    var tips = document.querySelector(".tips");



    var signLogin = document.getElementsByClassName("sign-login")[0];
    var signUser = document.getElementsByClassName("sign-user")[0];
    var wel = document.getElementsByClassName("wel")[0];
    var exit = document.getElementsByClassName("exit")[0];

    // 标识用户身份
    var lgc = getCookie("lgc");
    if (lgc) {
        signUser.classList.remove("hide");
        signLogin.classList.add("hide");

        wel.textContent = "欢迎," + lgc;

        exit.onclick = function () {
            setCookie("lgc", "", -1);
            location.reload();
        }
    }


    // console.log(form.id);
    // console.log(form.user);
    // console.log(form.class);
    // console.log(form.ch);
    // console.log(form.eh);
    // console.log(form.mh);

    // 全局变量  1. 页面加载时的默认值  2. 记录切换后的值
    var wd = ""; // 搜索的关键词 (默认 "" => 查询所有数据)
    var col = "id"; // 排序的列名(默认id)
    var type = "asc"; // 排序的方式(默认升序)
    var page = 1;    // 默认显示第一页
    var size = 5;    // 默认每页显示五条


    // 页面加载时请求所有成绩
    loadGrade();



    showGrade.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if (target.className == "del") {
            console.log(target);
            var tr = target.parentElement.parentElement;
            var id = tr.getAttribute("data-id");
            console.log(id);


            if (confirm("是否删除该学员成绩?")) {
                var xhr = new XMLHttpRequest(); // 0 

                xhr.open("get", "../php/deleteGradeById.php?id=" + id, true);  // 1

                xhr.send();

                xhr.onreadystatechange = function () {
                    // 2 3 4
                    console.log("请求状态改变", xhr.readyState);

                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var result = xhr.responseText;
                        // console.log(result);
                        var result = JSON.parse(result);
                        console.log(result);

                        var { status, message } = result;
                        if (status) {
                            tr.remove();
                        } else {
                            alert(message);
                        }

                    }


                }
            }


            // tr.remove();


        } else if (target.className == "edit") {
            console.log(target);

            // 对应学员id获取学员成绩 =>渲染到表单
            var tr = target.parentElement.parentElement;
            var id = tr.getAttribute("data-id");
            console.log(id);


            var xhr = new XMLHttpRequest(); // 0 

            xhr.open("get", "../php/searchGradeById.php?id=" + id, true);  // 1

            xhr.send();

            xhr.onreadystatechange = function () {
                // 2 3 4
                console.log("请求状态改变", xhr.readyState);

                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    // console.log(result);
                    var result = JSON.parse(result);
                    console.log(result);

                    var { status, message, data } = result;
                    if (status) {
                        var { id, name, class: _class, chinese, math, english } = data;
                        form.id.value = id;
                        form.name.value = name;
                        form.class.value = _class;
                        form.ch.value = chinese;
                        form.mh.value = math;
                        form.eh.value = english;

                    } else {
                        alert(message);
                    }

                }


            }




            shadow.style.display = "block";
        }


    }

    save.onclick = function () {
        var id = form.id.value;
        var ch = form.ch.value;
        var mh = form.mh.value;
        var eh = form.eh.value;

        var reg = /^(\d{1,2}(\.\d)?|100)$/;
        console.log(reg.test(ch));
        if (id && reg.test(ch) && reg.test(mh) && reg.test(eh)) {

            // post传递数据
            // 1. 以post方式传递数据,将数据携带在请求主体(body)中 => 如何放到请求主体中?
            // 将参数数据 作为参数,传到send方法中

            // 2. 设置请求头 => 将数据格式改为FormData

            var xhr = new XMLHttpRequest(); // 0 

            xhr.open("post", `../php/updateGradeById.php`, true);  // 1

            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(`id=${id}&ch=${ch}&mh=${mh}&eh=${eh}`);

            xhr.onreadystatechange = function () {
                // 2 3 4
                console.log("请求状态改变", xhr.readyState);

                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    // console.log(result);

                    var result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;

                    if (status) {
                        shadow.style.display = "none";
                        // location.reload();


                        loadGrade();

                    } else {
                        alert(message);
                    }

                }
            }
        }
    }

    reset.onclick = function () {
        shadow.style.display = "none";
    }

    searchOrderLimit.onclick = function () {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className == "searchBtn") {
            var searchCon = target.previousElementSibling;
            wd = searchCon.value.trim();
            loadGrade();
        } else if (target.className == "orderCol") {
            col = target.value;
            loadGrade();
        } else if (target.className == "orderType") {
            type = target.value;
            loadGrade();
        } else if (target.className == "resetGrade") {
            wd = ""; // 搜索的关键词 (默认 "" => 查询所有数据)
            col = "id"; // 排序的列名(默认id)
            type = "asc"; // 排序的方式(默认升序)
            page = 1;    // 默认显示第一页
            size = 5;    // 默认每页显示五条
            loadGrade();
        }
    }

    showSel.onchange = function () {
        size = this.value;
        loadGrade();
    }






    function loadGrade() {
        var xhr = new XMLHttpRequest(); // 0 

        xhr.open("get", `../php/searchGradeOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true);  // 1

        xhr.send();

        xhr.onreadystatechange = function () {
            // 2 3 4
            // console.log("请求状态改变", xhr.readyState);

            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log(result);
                var data = JSON.parse(xhr.responseText);
                console.log(data);

                var { status, message, total, maxPage, current, list } = data;

                // 问题 => 页码多的 向 页码少的切换时  => 全局的page可能超出最大值
                //  => 1. 和后端返回的page保持一致
                //  => 2. 如果page超出最大值 => 等于最大值
                // page = current;
                page = page > maxPage ? maxPage : page;


                if (status) {

                    if (list) {
                        var html = "";

                        list.forEach((item) => {
                            var { id, name, class: _class, chinese, math, english, total } = item;
                            html += `<tr data-id="${id}">
                        <td>${id}</td>
                        <td>${name}</td>
                        <td>${_class}</td>
                        <td>${chinese}</td>
                        <td>${math}</td>
                        <td>${english}</td>
                        <td>${total}</td>
                        <td>
                            <a class="edit" href="javascript:;">编辑</a>
                        </td>
                        <td>
                            <a class="del" href="javascript:;">删除</a>
                        </td>
                    </tr>`
                        })
                        tbody.innerHTML = html;

                    } else {
                        tbody.innerHTML = `<tr><td  colspan="9">暂无数据</td></tr>`;
                    }

                    cur.textContent = `${current}/${maxPage}`;
                    tips.textContent = `共${total}条`;

                    // 数据请求成功只有 再给prev next绑定事件  => 判断是否超出临界值
                    prev.onclick = function () {
                        if (page <= 1) return false;
                        page--;
                        console.log(page);
                        loadGrade();
                    }
                    next.onclick = function () {
                        if (page >= maxPage) return false;
                        page++;
                        console.log(page);
                        loadGrade();
                    }



                } else {
                    throw message;
                }

            }

        }
    }

</script>

</html>